<template>
  <el-card shadow="hover">
    <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-form-item label="商品分类" prop="name">
        <el-cascader v-model="state.ruleForm.value" :options="options" />
      </el-form-item>
      <el-form-item label="商品名称" prop="desc1">
        <el-input v-model="state.ruleForm.desc" type="text" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品简介" prop="desc2">
        <el-input v-model="state.ruleForm.textarea" :rows="2" type="textarea" placeholder="请输入商品简介(100字)" />
      </el-form-item>
      <el-form-item label="商品价格" prop="desc3">
        <el-input v-model="state.ruleForm.desc1" type="number" placeholder="请输入商品价格" />
      </el-form-item>
      <el-form-item label="商品售卖价" prop="desc4">
        <el-input v-model="state.ruleForm.desc2" type="number" placeholder="请输入商品售价" />
      </el-form-item>
      <el-form-item label="商品库存" prop="desc5">
        <el-input v-model="state.ruleForm.desc3" type="number" placeholder="请输入商品库存" />
      </el-form-item>
      <el-form-item label="商品标签" prop="desc6">
        <el-input v-model="state.ruleForm.desc4" type="text" placeholder="请输入商品小标签" />
      </el-form-item>
      <el-form-item label="商品标签" prop="desc6">
        <el-radio-group v-model="state.ruleForm.desc5">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品主图" prop="desc6">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="详情内容" prop="desc6">
        <div style="border: 1px solid #ccc">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
          <Editor style="height: 200px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">立即创建</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
  export default {
    name: 'ADD',
  }
</script>
<script setup>
  import {
    Plus
  } from '@element-plus/icons-vue'
  import '@wangeditor/editor/dist/css/style.css'
  import {
    Editor,
    Toolbar
  } from '@wangeditor/editor-for-vue'
  import {
    reactive,
    ref,
    onMounted,
    onBeforeUnmount,
    shallowRef
  } from "vue"
  const Components = {
    Editor,
    Toolbar
  };
  const state = reactive({
    ruleForm: {
      value: '',
      desc: '',
      desc1: '',
      desc2: '',
      desc3: '',
      desc4: '',
      textarea: '',
      desc5: 0,
    }
  })
  let id = 0
  const options = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node
    setTimeout(() => {
      const nodes = Array.from({ length: level + 1 }).map((item) => ({
        value: ++id,
        label: `Option - ${id}`,
        leaf: level >= 2,
      }))
      // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
      resolve(nodes)
    }, 1000)
  },
}
  const editorRef = shallowRef()

  // 内容 HTML
  const valueHtml = ref('')

  // 模拟 ajax 异步获取内容
  onMounted(() => {
    // setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    // }, 1500)
  })

  const toolbarConfig = {}
  const editorConfig = {
    placeholder: '请输入内容...'
  }

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
</script>

<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>